
<template>
    <div class="ratingSelect">
        <div class="ratingType">
            <span class="block all" :class="{'active': selectType === 2}" @click="select(2,$event)">{{desc.all}}
                <span class="count">{{ratings.length}}</span>
            </span>
            <span class="block positive" :class="{'active': selectType === 0}" @click="select(0,$event)">{{desc.positive}}
                <span class="count">{{positives.length}}</span>
            </span>
            <span class="block negative" :class="{'active': selectType === 1}" @click="select(1,$event)">{{desc.negative}}
                <span class="count">{{negatives.length}}</span>
            </span>
        </div>
        <div class="switch" :class="{'on': onlyContent === true}" @click="toggleContent">
            <span class="icon-check_circle"></span>
            <span class="content">只看有评价的内容</span>
        </div>
    </div>
</template>


<script>

const ALL = 2;         //所有评价
const POSITIVE = 0;   //正面评价
const NEGATIVE = 1;   //负面评价

export default {
    props: {
        ratings: {    //评价内容
            type: Array,
            default(){
                return []
            }
        },
        selectType: {   //评价类型
            type: Number,
            default: ALL
        },
        onlyContent: {
            type: Boolean,
            default: false   //false:可以看到所有的评价；true:只看有内容的评价
        },
        desc: {
            type: Object,
            default(){
                return {
                    all: '全部',
                    positive: '满意',
                    negative: '不满意'
                }
            }
        }
    },
    computed: {
        positives(){
            let positiveArr = [];
            this.ratings.forEach((rating) => {
                if(rating.rateType === POSITIVE){
                    positiveArr.push(rating.rateType);
                }
            });
            return positiveArr;
        },
        negatives(){
            let negativeArr = [];
            this.ratings.forEach((rating) => {
                if(rating.rateType === NEGATIVE){
                    negativeArr.push(rating.rateType);
                }
            });
            return negativeArr;
        }
    },
    methods: {
        select(type,event){
            if(!event._constructed){
                return;
            }
            this.$emit('selectTab', type);
        },
        toggleContent(event){
            if(!event._constructed){
                return;
            }
            this.$emit('toggleCon');
        }
    }
    
}

</script>



<style scoped lang="stylus" rel="stylesheet/stylus">

    @import '~common/stylus/mixin.stylus';
    
    .ratingSelect{
        .ratingType{
            padding: 18px 0;
            margin: 0 18px;
            border-bottom: 1px solid rgba(7,17,27,0.2);
            font-size: 0;
            .block{
                display: inline-block;
                font-size: 12px;
                padding: 8px 12px;
                color: rgb(77,85,93);
                margin-right: 8px;
                line-height: 16px;
                border-radius: 5px;
                &.active{
                    color: #fff;
                }
                .count{
                    font-size: 8px;
                    margin-left: 2px;
                }
            }
            .all{
                background: rgba(0,160,220,0.2);
                &.active{
                    background: rgb(0,160,220);
                }
            }
            .positive{
                background: rgba(0,160,20,0.2);
                &.active{
                    background: rgb(0,160,20);
                }
            }
            .negative{
                background: rgba(77,85,93,0.2);
                &.active{
                    background: rgb(77,85,93);
                }
            }
        }
        .switch{
            padding: 12px 18px;
            border-bottom: 1px solid rgba(7,17,27,0.2);
            line-height: 24px;
            font-size: 0;
            color: rgb(147,153,159);
            &.on{
                color: #00c850;
            }
            .icon-check_circle{
                display: inline-block;
                vertical-align: top;
                font-size: 20px;
                margin-right: 4px;
            }
            .content{
                display: inline-block;
                vertical-align: top;
                font-size: 12px;
            }
        }
    }


</style>

